import React,{useState,useEffect} from 'react'
import {Space,Table,Image,Button,Popconfirm} from 'antd'
import {getBannerList,deleteBanner} from '@/api/banner'
import { DeleteOutlined } from '@ant-design/icons';
import {useSize} from 'ahooks'
import usePagination from '@/hooks/usePagination'
import {useNavigate} from 'react-router-dom'
export default function List() {
  const navigate = useNavigate()
  const [list,setList] = useState([])
  const getBannerListData = ()=>{
    getBannerList().then(res=>{
      setList(res.data.data)
    })
  }
  useEffect(()=>{
    getBannerListData()
  })

  // 设置表格的滚动高度
  const [height] = useState(document.body.offsetHeight)
  const size = useSize(document.querySelector('body'));   // 使用useSize这个ahooks监听body的尺寸变化
  
  // 设置分页器
  // 调用hooks函数
  const config = usePagination({
    size:5,
  })

  
  return (
    <Space direction='vertical' style={{display:'flex'}}>
      <Button type='primary' onClick={()=>navigate('/banner/add')}>添加轮播图</Button>
      <Table
        dataSource={list}
        rowKey={'bannerid'}
        scroll={{
          y: (size ? size.height : height)-350
        }}
        pagination={config}
      >
        <Table.Column title='序号' render={(_,record,index)=>{
          return <span>{config.pageSize*(config.current-1)+index+1}</span>
        }}></Table.Column>
        <Table.Column title='图片' dataIndex={'img'} render={(text)=>{
          return <Image src={text} style={{height:70}}/>
        }}></Table.Column>
         <Table.Column title='alt' dataIndex={'alt'}></Table.Column>
         <Table.Column title='link' dataIndex={'link'}></Table.Column>
         <Table.Column title='操作' render={(record)=>{
          return <Popconfirm
            title="想要删除吗?"
            description="Are you sure to delete!"
            onConfirm={()=>{
              deleteBanner({bannerid:record.bannerid}).then(()=>{
                getBannerListData() // 删除成功后，需要重新调用后台获取管理员列表信息接口
              })
            }}
            okText="确定"
            cancelText="取消"
          >
            <Button danger shape='circle' icon={<DeleteOutlined/> }></Button>
          </Popconfirm>
         }}></Table.Column>
      </Table>
    </Space>
  )
}
